<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			*{
				margin:0;
				padding:0;
			}
			#box{
				height:100px;
				width:100px;
				background-color: red;
				position: relative;
				left:0;
				top:0;
			}
		</style>
	</head>
	<body>
		<div id="box"></div>
		<script>
			let box=document.getElementById("box");
			let l=0,t=0;
			window.onkeydown=function(e){
				//console.log(e.keyCode);
				//上 38   下 40  左37  右39
				switch (e.keyCode){
					case 38:
					    t-=10;//0-10=-10  -10-10=-20
					    box.style.top=`${t}px`;
						break;
					case 40:
					    t+=10;//-20+10=-10 -10+10=0 0+10=10
					    box.style.top=`${t}px`;
						break;
					case 37:
					    l-=10;
						box.style.left=`${l}px`;
						break;
					case 39:
						l+=10;
						box.style.left=`${l}px`;
						break;
					default:
					    console.log("按键不对")
						break;
				}
			}
		</script>
	</body>
</html>
